<template>
    <div class="log-wrapper">
      <h2 class="log-title">登录记录</h2>
      <ul class="log-list">
        <li v-for="historyItem in history" :key="historyItem" class="log-item">{{ formatDate(historyItem) }}</li>
      </ul>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref } from 'vue';
  import { userhistoryLogin } from '../api/post'
  
  const history = ref()
  
  userhistoryLogin().then(res => {
    history.value = parseDates(res)
  })
  
  function parseDates(data: any[]) {
    return data.map((dateStr: string) => {
      const timestamp = Date.parse(dateStr.replace(/"/g, ''));
      return new Date(timestamp);
    });
  }
  
  function formatDate(date: Date) {
    const year = date.getFullYear();
    const month = ('0' + (date.getMonth() + 1)).slice(-2);
    const day = ('0' + date.getDate()).slice(-2);
    const hours = ('0' + date.getHours()).slice(-2);
    const minutes = ('0' + date.getMinutes()).slice(-2);
    const seconds = ('0' + date.getSeconds()).slice(-2);
    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
  }
  </script>
  
  <style scoped>
  .log-wrapper {
    margin: 20px;
    background-color: #f7f7f7;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 16px;
  }
  
  .log-title {
    font-size: 24px;
    margin-bottom: 16px;
  }
  
  .log-list {
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
    max-height: 200px; /* 设置最大高度 */
    overflow-y: scroll; /* 显示垂直滚动条 */
  }
  
  .log-item {
    margin-bottom: 4px;
    background-color: #fff;
    padding: 8px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  </style>
  